extends layout

block content
	div.ui.inverted.segment(style="border-radius: 0px; width:100%; height:100%; padding:0; margin:0")
		div.ui.inverted.borderless.menu(style="margin:0;border-radius:0")
			div.item
				div.ui.dropdown(id="channel" style="height:100%")
					div.ui.inverted.icon.button(style="width:100px") Channel
						i.dropdown.icon
					div.menu
						div.active.item(data-value="1" style="width:100px") 1
						div.item(data-value="2") 2
						div.item(data-value="3") 3
						div.item(data-value="4") 4
			div.item
				div.ui.inverted.compact.button.channel-indicate 1
			div.item(style="width:200px")
				div.ui.icon.buttons(style="width:100%")
					button.ui.button(id="play")
						i.play.icon
					button.ui.button(id="pause")
						i.pause.icon
					button.ui.active.button(id="stop")
						i.stop.icon
			div.right.item
				if user
					div.ui.inverted.orange.button(id="user" userid="#{user._id}" style="margin-left:15px") #{user.username}
				else
					div.ui.inverted.button(id="signin" style="width:80px; margin-left:15px") 登陆
					div.ui.inverted.button(id="signup" style="width:80px; margin-left:15px") 注册
				div.ui.inverted.icon.button(id="home" style="margin-left:15px")
					i.ui.home.icon
				div.ui.inverted.button(id="save" style="width:80px; margin-left:15px") 保存
		//- 编辑网格
		canvas(id="canvas")

	//- 音源读取进度条
	div.ui.basic.modal(id="progress-modal")
		div.ui.inverted.orange.progress(id="loading" data-value="1" data-total="88")
			div.bar
				div.progress
			div.label Loading Sources

	//- 保存成功提示
	div.ui.basic.modal(id="saving-modal")
		div.ui.icon.huge.header
			i.massive.checkmark.icon
			h1.header 保存成功

	//- 登陆框
	div.ui.small.modal(id="signin-modal")
		div.header
		div.content(style="width:300px; margin:auto")
			form(class="ui form login-form" onSubmit="signin(); return false;")
				div(class="field")
					label Username
					div(class="ui left icon input")
						input.username-input(type="text" name="username" placeholder="Username")
						i(class="user icon")
				div(class="field")
					label Password
					div(class="ui left icon input")
						input.password-input(type="password" name="password" placeholder="Password")
						i(class="lock icon")
			div(class="ui error message" style="display:none")
				ul.list
					li.error-message
		div.actions(style="text-align:center")
			div.ui.green.button(id="signin-btn" style="width:30%;") 登陆
			a.jumpup(style="left:20px; position:relative") 注册

	//- 注册框
	div.ui.small.modal(id="signup-modal")
		div.header
		div.content(style="width:300px; margin:auto")
			form(class="ui form signup-form" onSubmit="signup(); return false;")
				div(class="field")
					label Username
					div(class="ui left icon input")
						input.username-input(type="text" placeholder="Username" name="username")
						i(class="user icon")
				div(class="field")
					label Email
					div(class="ui left icon input")
						input.email-input(type="text" placeholder="Email" name="email")
						i(class="mail icon")
				div(class="field")
					label Password
					div(class="ui left icon input")
						input.password-input(type="password" name="password2" placeholder="Password")
						i(class="lock icon")
				div(class="field")
					label Confirm Password
					div(class="ui left icon input")
						input.confirm-input(type="password" placeholder="Password" name="confirm_password")
						i(class="lock icon")
			div(class="ui error message" style="display:none")
				ul.list
					li.error-message
		div.actions(style="text-align:center")
			div.ui.green.button(id="signup-btn" style="width:30%;") 注册
			a.jumpin(style="left:20px; position:relative") 登陆

	//- 页面跳转提示框
	div.ui.small.basic.modal(id="jump-modal")
		div.ui.icon.header
			i.warning.sign.icon
			p.msg 是否跳转至个人主页？
		div.content(style="text-align:center")
			h3 跳转会丢失编辑内容，请确保乐谱保存成功。
		div.actions
			div.ui.cancel.red.basic.inverted.button
				i.remove.icon(style='display:inline-block')
				p(style='display:inline-block') 否
			div.ui.ok.green.basic.inverted.button
				i.checkmark.icon(style='display:inline-block')
				p(style='display:inline-block') 是

	script.
		window.spectrum = !{JSON.stringify(spectrum)};

	script(src="libs/createjs/createjs-2015.11.26.min.js")
	script(src="javascripts/editor/menu.js")
	script(src="javascripts/editor/music.js")
	script(src="javascripts/editor/data.js")
	script(src="javascripts/editor/canvas.js")